<template>
    <el-form :model="formData" v-bind="formConfigCpu" ref="formRef">
        <el-form-item
            v-for="item in formList"
            :key="item.prop"
            :style="{ width: item.width || 'auto' }"
            v-bind="item"
        >
            <template v-if="item.type === 'slot'">
                <slot :name="item.prop"></slot>
            </template>
            <!-- 输入框 || 密码框-->
            <template v-if="['text', 'password'].includes(item.type)">
                <el-input v-model="formData[item.prop]" v-bind="item" />
            </template>
            <!-- 自动补全输入框-->
            <template v-if="item.type === 'autocomplete'">
                <el-autocomplete v-model="formData[item.prop]" v-bind="item" />
            </template>
            <!-- 数字输入框 -->
            <template v-if="item.type === 'number'">
                <el-input-number v-model="formData[item.prop]" v-bind="item" />
            </template>
            <!-- 取色器 -->
            <template v-if="item.type === 'picker'">
                <el-color-picker v-model="formData[item.prop]" v-bind="item" />
            </template>
            <!-- 评分 -->
            <template v-if="item.type === 'rate'">
                <el-rate v-model="formData[item.prop]" v-bind="item" />
            </template>
            <!-- 滑块 -->
            <template v-if="item.type === 'slider'">
                <el-slider v-model="formData[item.prop]" v-bind="item" />
            </template>
            <!-- 开关 -->
            <template v-if="item.type === 'switch'">
                <el-switch v-model="formData[item.prop]" v-bind="item" />
            </template>
            <template v-if="['radio', 'checkbox'].includes(item.type)">
                <el-radio-group v-model="formData[item.prop]" v-bind="item">
                    <!-- 单选框 -->
                    <template v-if="item.type === 'radio'">
                        <el-radio v-for="i in item.options" :key="i.label" v-bind="i"></el-radio>
                    </template>
                    <!-- 多选框 -->
                    <template v-else>
                        <el-checkbox
                            v-for="i in item.options"
                            :key="i.label"
                            v-bind="i"
                        ></el-checkbox>
                    </template>
                </el-radio-group>
            </template>
            <!-- 级联选择器 -->
            <template v-if="item.type === 'cascader'">
                <el-cascader v-bind="item" v-model="formData[item.prop]" />
            </template>
            <!-- 下拉选择框 -->
            <template v-if="item.type === 'select'">
                <el-select v-model="formData[item.prop]" v-bind="item">
                    <el-option v-for="i in item.options" :key="i.label" v-bind="i" />
                </el-select>
            </template>
            <!-- 时间选择器 -->
            <template v-if="dataArr.includes(item.type)">
                <DateTime :data="formData" v-bind="item" />
            </template>
            <!-- 文件上传 -->
            <template v-if="item.type === 'upload'">
                <Upload :fileList="formData" v-bind="item">
                    <slot name="upload"></slot>
                    <slot name="tip"></slot>
                    <slot name="trigger"></slot>
                    <slot name="file"></slot>
                    <slot></slot>
                </Upload>
            </template>
        </el-form-item>
    </el-form>
</template>
<script lang="ts">
export const formOptions = {
    inline: false, //行内表单模式
    validateOnRuleChange: true, //是否在 rules 属性改变后立即触发一次验证
    hideRequiredAsterisk: false, //是否显示必填字段的 * 标记
    requireAsteriskPosition: 'right', //必填字段的 * 标记的位置，可选值： left / right
    showMessage: true, //是否显示校验错误信息
    statusIcon: false, //是否在输入框尾部显示校验状态图标
    size: 'large', //表单尺寸，可选值： small / medium / large
    labelPosition: 'left', //label的位置，可选值： left / right / top
    scrollToError: true //当校验失败时，滚动到第一个错误表单项
};
</script>
<script setup lang="ts">
import { FormList } from 'types/components/Form';
const formRef = ref<any>();
const dataArr = [
    'datetime',
    'datetimerange',
    'daterange',
    'date',
    'year',
    'years',
    'month',
    'dates',
    'week',
    'monthrange'
];
const props = defineProps({
    formData: {
        type: Object,
        required: true
        // {
        //     name: '',
        // }
    },
    formConfig: {
        type: Object,
        default: () => ({})
    },
    formList: {
        type: Object as () => FormList[],
        required: true
        // {
        //   placeholder: "请输入名称",
        //   label: "名称",
        //   prop: "name",
        //   type: "text",
        //   clearable: true,
        //   disabled: false,
        //   rules: [
        //     { required: true, message: "age is required", trigger: "blur" },
        //     { type: Number, message: "age must be a number", trigger: "blur" },
        //   ],
        // }
    }
});
const formConfigCpu = computed(() => ({ ...formOptions, ...props.formConfig }));
const submit = (cb: () => void) => {
    if (!formRef.value) return;
    formRef.value.validate((valid: boolean, error: any) => valid && cb());
};
const reset = () => formRef.value && formRef.value.resetprops();
defineExpose({ fromInstance: formRef, submit, reset });
</script>

<style lang="scss" scoped></style>
